@font-face {
    font-family: "Roboto";
    src: url('Roboto-Bold.ttf');
}

@font-face {
    font-family: "Roboto";
    src: url('Roboto-Regular.ttf');
}

.keyboard {
    -fx-background-color: lightgrey;
    -fx-padding: 5;
}

.keyboard .label {
    -fx-font-family: "Roboto";
}

.keyboard > .grid {
    -fx-hgap: 5;
    -fx-vgap: 5;
}

.keyboard .key {
    -fx-background-radius: 4;
    -fx-padding: 10 0 10 0;
    -fx-pref-height: 50;
    -fx-background-color: linear-gradient(to bottom, derive(lightgrey, +20%), derive(lightgrey, -20%)), white;
    -fx-background-insets: 0, 1;
}

.keyboard .key:pressed {
    -fx-background-color: linear-gradient(to bottom, derive(lightgrey, +20%), derive(lightgrey, -20%)), orange !important;
}

.keyboard .key.dual {
    -fx-padding: 5 0 5 0;
}

.keyboard .key .label {
    -fx-text-fill: black;
    -fx-font-size: 1.5em;
}

.keyboard .key.dual .label {
    -fx-font-size: 1.2em;
}

.keyboard .key.special {
    -fx-background-color: linear-gradient(to bottom, derive(lightgrey, +20%), derive(lightgrey, -20%)), rgb(156, 164, 176);
    -fx-padding: 10 15 10 15;
}

.keyboard .key.special:disabled {
    -fx-opacity: .4;
}

.keyboard .key.special .label {
    -fx-font-size: 1.2em;
}

.keyboard .key.special > .ikonli-font-icon {
    -fx-icon-size: 18px;
}

.keyboard .key.special:selected {
    -fx-background-color: linear-gradient(to bottom, derive(lightgrey, +20%), derive(lightgrey, -20%)), white;
}

.keyboard .key.special:selected .ikonli-font-icon {
    -fx-icon-color: black;
}

.keyboard .key.enter {
    -fx-background-color: linear-gradient(to bottom, derive(lightgrey, +20%), derive(lightgrey, -20%)), rgb(52, 123, 246);
}

.keyboard .key.enter > .ikonli-font-icon {
    -fx-icon-color: white;
}

.keyboard .key.space {
    -fx-background-color: linear-gradient(to bottom, derive(lightgrey, +20%), derive(lightgrey, -20%)), white;
}

.keyboard .key.special.equals,
.keyboard .key.special.plus,
.keyboard .key.special.minus,
.keyboard .key.special.multiply,
.keyboard .key.special.divide {
    -fx-font-size: 1.5em;
    -fx-font-family: "Roboto";
    -fx-font-weight: bold;
}

.keyboard > * > .toolbar {
    -fx-spacing: 10;
    -fx-padding: 10;
}

.keyboard > * > .toolbar > .ikonli-font-icon {
    -fx-icon-size: 20px;
}

.keyboard .extra-keys-box {
    -fx-spacing: 5;
    -fx-padding: 10;
    -fx-background-color: grey, lightgrey;
    -fx-background-insets: 0, 1;
    -fx-background-radius: 4;
}

.keyboard .keyboard-selector {
}

.keyboard .keyboard-selector .toggle-button {
    -fx-padding: 10;
    -fx-background-color: transparent;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-border-color: #e0e0e0;
    -fx-border-width: 0 0 1 0;
    -fx-font-size: 1.2em;
}

.keyboard .keyboard-selector .toggle-button:selected {
    -fx-background-color: rgb(52, 123, 246);
    -fx-text-fill: white;
    -fx-border-width: 0;
}

.keyboard .keyboard-selector .toggle-button.last {
    -fx-border-width: 0;
}